<template>
  <div class="box4" ref="map"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// 引入中国地图的JSON数据
import chinaJSON from "./china.json";
// 获取DOM节点
let map = ref();

// 注册中国地图
echarts.registerMap("china", chinaJSON as any);

//生命周期
onMounted(() => {
  initCharts();
});

const initCharts = () => {
  let myChart = echarts.init(map.value);
  // 设置配置项
  myChart.setOption({
    // 地图组件
    geo: {
      map: "china",
      roam: true, //鼠标缩放
      // zoom: 2,
      //地图的位置调式
      left: 50,
      top: 100,
      right: 50,
      bottom: 50,
      //地图上的文字的设置
      label: {
        show: true, //文字显示出来
        color: "white",
        fontSize: 20,
      },
      //每一个多边形的养伤
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "red",
            },
            {
              offset: 1,
              color: "blue",
            },
          ],
          global: false,
        },
        opacity: 0.5,
      },
      //地图的高亮的效果
      emphasis: {
        itemStyle: {
          color: "red",
        },
        label: {
          fontSize: 40,
        },
      },
    },
    // 布局位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: "lines", //
        data: [
          {
            coords: [
              [116.405285, 39.904989],
              [119.306239, 26.075302],
            ],
            // 统一的样式设置
            lineStyle: {
              color: "white",
              width: 5,
            },
          },
        ],
        // 是否显示特效
        effect: {
          show: true,
          symbol: "rect",
          color: "black",
          symbolSize: 40,
        },
      },
    ],
  });
};
</script>

<style scoped lang="scss"></style>
